<template>
  <f7-toolbar tabbar labels>
    <f7-link tab-link v-bind:class="{ 'tab-link-active': isActive}" href="/trade/" icon-f7="world_fill" :animate="false">
      货源
    </f7-link>
    <f7-link tab-link v-bind:class="{ 'tab-link-active': isActive1}" href="/lines/" icon-f7="navigation_fill" :animate="false">
      线路
    </f7-link>
    <f7-link tab-link v-bind:class="{ 'tab-link-active': isActive2}" href="/pass/" icon-f7="add" :animate="false">
      车辆
    </f7-link>
    <f7-link tab-link v-bind:class="{ 'tab-link-active': isActive3}" href="/message/" icon-f7="chat" :animate="false">消息</f7-link>
    <f7-link tab-link v-bind:class="{ 'tab-link-active': isActive4}" href="/relation/" icon-f7="persons" :animate="false">关系</f7-link>
    <f7-link tab-link v-bind:class="{ 'tab-link-active': isActive5}" href="/mine/" icon-f7="more" :animate="false">我的</f7-link>
  </f7-toolbar>
</template>
<script>
export default {
  name: 'tab',
  props: {
    isActive: String,
    isActive1: String,
    isActive2: String,
    isActive3: String,
    isActive4: String,
    isActive5: String
  }
}
</script>
<style scoped>
.ios .tabbar a,
.ios .tabbar-labels a {
  font-size: 11px;
}
.ios .tabbar a.tab-link-active,
.ios .tabbar-labels a.tab-link-active {
  color: #ad7ff7;
}
</style>
